<template>
    <div class="login-container">
        <el-row justify="center" align="middle" style="width: 100%;height: 100%;">
            <el-col :span="6" style="min-width: 450px;">
                <el-card>
                    <template #header>
                        <div align="center">
                            <el-text size="large">后台登录</el-text>
                        </div>
                    </template>
                    <el-form :model="formData" :rules="rules" ref="formDataRef">
                        <el-form-item prop="account">
                            <el-input v-model.number="formData.account" placeholder="账号" prefix-icon="User" size="large"
                                autocomplete="off" />
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input v-model="formData.password" placeholder="密码" prefix-icon="Lock" size="large"
                                :show-password="true" autocomplete="off" />
                        </el-form-item>
                        <el-form-item prop="verify_code">
                            <el-input v-model="formData.verify_code" placeholder="点击图片更换验证码" size="large">
                                <template #append>
                                    <img :src="captcha" alt="验证码" @click="getCaptcha" />
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="large" @click="submit(formDataRef)"
                                style="width: 100%;">登录</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { login } from '@/api/index';
import { useRouter } from 'vue-router';

const formData = reactive({
    account: '13619050121',
    password: '123456',
    verify_code: ''
})

const router = useRouter()

const formDataRef = ref()
// 验证账号
const validateAccount = (rule, value, callback) => {
    if (value === '') {
        return callback(new Error('账号不能为空'))
    } else {
        callback()
    }
}
// 验证密码
const validatePassword = (rule, value, callback) => {
    if (value === '') {
        return callback(new Error('密码不能为空'))
    } else {
        callback()
    }
}
// 表单验证规则
const rules = reactive({
    account: [
        { validator: validateAccount, trigger: 'blur' }
    ],
    password: [
        { validator: validatePassword, trigger: 'blur' }
    ],
})

// 图片验证码
const captcha = ''
// 获取验证码
const getCaptcha = () => {
    console.log('获取验证码')
}

const submit = (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log(formData)
            login({ userName: formData.account.toString(), passWord: formData.password }).then(({ data }) => {
                if (data.code === 10000) {
                    ElMessage.success('登录成功')
                    // 存储token
                    localStorage.setItem('token', data.data.token)
                    localStorage.setItem('userInfo', JSON.stringify(data.data.userInfo))
                    // 调转到首页
                    router.push('/')
                }
            })
        } else {
            console.log("error submit!!");
        }
    })
}
</script>

<style lang="less" scoped>
.login-container {
    width: 100%;
    height: 100%;

    background-color: #2d3a4b;
}
</style>